/**
 * 全局公共样式
 */
 @import "./assets/styles/global.scss";

* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    font: 16px sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input,select,textarea,button {
    height: 40px;
    padding: 6px;
    border: 1px solid #919191;
    border-radius: 3px;
    outline: none;
    font: inherit;
    transition: all 0.2s;
    color: $form_font_color;
}
input,select,textarea {
    &:focus {
        border-color: $theme_color;
        box-shadow: 0 0 12px $theme_color;
        color: darken($theme_color, 10%);
    }
}
button,a {
    cursor: pointer;
}

#root {
    height: 100%;
    overflow: hidden;
    .App {
        height: 100%;
        & > header {
            width: 100%;
            background-color: #fcfcfc;
            position: relative;
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
            a {
                text-decoration: none;
                color: #13141a;
                .logo {
                    width: 154px;
                    height: 42px;
                    padding: 12px 0 12px 66px;
                    background: url("./assets/images/logo-42x42.png") no-repeat 12px 12px;
                    font-size: 1.4rem;
                    line-height: 42px;
                    box-sizing: content-box;
                    cursor: pointer;
                }

            }
            .hello-admin {
                position: absolute;
                top: 22px;
                right: 12px;
                span {
                    color: $theme_color;
                    cursor: pointer;
                    &:hover {
                        color: lighten($theme_color, 15%);
                    }
                }
            }
        }
        & > main {
            height: calc(100% - 66px);
            display: flex;
            // 左侧导航部分
            .main-left {
                width: 220px;
                height: 100%;
                background-color: #3d3d3d;
                border-right: 1px solid #5d5d5d;
                overflow-y: auto;
                ul {
                    padding: 12px 0;
                    margin: 0;
                    list-style: none;
                    li {
                        padding: 0 12px;
                        cursor: pointer;
                        &:hover {
                            a {
                                color: lighten($theme_color, 15%);
                            }
                        }
                        a {
                            width: 100%; 
                            height: 42px;
                            padding: 0 12px;
                            line-height: 42px;
                            border-top: 1px solid #1d1d1d;
                            border-bottom: 1px solid #5d5d5d;
                            text-decoration: none;
                            color: #ffffff;
                            display: block;
                            &.active {
                                background-color: $theme_color;
                                border-top: 1px solid darken($theme_color, 15%);
                                border-bottom: 1px solid lighten($theme_color, 15%);
                                color: #ffffff;
                            }
                            &:first-child {
                                border-top: none;
                            }
                        }
                        &.logout {
                            span {
                                width: 100%; 
                                height: 42px;
                                padding: 0 12px;
                                line-height: 42px;
                                color: #ffffff;
                                display: block;
                                &:hover {
                                    background-color: #fb5b46;
                                }
                            }
                        }
                    }
                }
            }
            // 右侧内容部分
            .main-right {
                width: calc(100% - 220px);
                background-color: #f3f3f3;
                // 内容容器
                .container {
                    padding: 10px 12px 80px;
                    height: 100%;
                    overflow-y: auto;
                    h1 {
                        margin: 0 0 12px;
                    }
                }
            }
        }
    }
}

// 滚动条设置
$scrollbar_width: 8px;
::-webkit-scrollbar {
    width: $scrollbar_width;
}
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
    width: $scrollbar_width;
    border-radius: #{$scrollbar_width / 2};
    background-color: #5d5d5d;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #1d1d1d;
}

